<template>
  <div :class="{menu:true,scrollMenu:scrollTag}" ref='topmenu'>
    <div class="selectCity">
      <van-popup v-model="show" position="bottom" :overlay="false">
        <van-area :area-list="list"  :columns-num="3"  @confirm="confirm" @cancel="cancel" :value="area[3]"/>
      </van-popup>
	    <div class="picker" @click="showAreaList">
	     <div class="recommend_Ttile">{{areaInit}}</div>
       <img src="http://file.rzkeji.com/web/recruit/icon/downArrow.png"/></div>
	    </div>
      <div class="search">
        <img src="http://file.rzkeji.com/web/recruit/icon/search.png"/>
        <div  @click="goSearch" :class="{scrollInput:scrollTag}">
          搜索职位,企业名称,人才简历
        </div>
      </div>
    <img src="http://file.rzkeji.com/web/recruit/icon/me.png" class="me"/>
  </div>
</template>

<script>
import areaList from '../assets/area'
export default {
	data () {
    return {
      show:false,
      list:'',
      areaInit:'全国',
      scrollTag:''
    }
  },
  computed:{
    // scrollTag(){
    //   // console.log(this.$store.state.modulesIndex.scrollTag)
    //   return this.scrollTag},
    area:{
      get: function () {
        this.areaInit=this.$store.state.modulesIndex.area[2].substr(0,2)
      return this.$store.state.modulesIndex.area
      },
      set: function (newValue) {
      this.$store.dispatch('setArea',newValue)
      }
    },
  },
  methods:{
  	goSearch(){
  		this.$router.push({path:"/search"})
  	},
    showAreaList(){   //当点击全国按钮的时候显示地址选择器
      this.show=! this.show
      this.$emit('removeTransform')
    },
    confirm(e){   //点击确定按钮时执行
      console.log(e)   //这里可以获取选取的地址信息
      let arr=[]
      for(let k in e){
        arr.push(e[k].name)
      }
      arr.push(e[2].code)
      this.$store.commit('setArea',arr);//传进area
      // console.log(this.$store.state.modulesIndex.area)
      this.show=false //关闭地址选择器
      this.areaInit=this.$store.state.modulesIndex.area[2].substr(0,2)//改变头部显示的地区
    },
    cancel(){ //点击取消按钮时执行
      this.show=false
    }
  },
  mounted(){
    this.list=areaList   //这里是获取improt引入的地址数据    import areaList from '../assets/area'是一个json格式数据的js文件
    let _this=this
    window.addEventListener('scroll',function(){
      let top = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset//要做兼容 在模拟器能正常获取scrolltop在真机一直为0
        if(top==0 || top<0){
           _this.scrollTag=false;
        }else{
           _this.scrollTag=true
        }

      })
  }
}
</script>

<style scoped>
.menu{width:100%;height:42.5px;position: fixed;top: 0;left: 0;z-index: 99;display: flex;justify-content: row;}
.selectCity{width:70px;height: 100%;color: white;line-height: 42.5px;display: flex;justify-content: row;margin-left: 10px;}
.selectCity img{width:12.5px;height: 7.5px;display: block;margin-top: 18px;margin-left: 10px;}
.search{width: 250px;height: 100%;position: relative;}
.search div{width: 210px;height:30px;line-height: 30px;position: absolute;left: 0;top: 6.25px;background-color: #fff;border-radius: 20px;padding-left: 40px;opacity: 0.3}
.search img{width: 20px;height: 20px;position: absolute;left: 10px;top: 10.25px;z-index: 99;}
.me{width: 25px;height: 25px;margin-top: 10.5px;margin-left: 10px;}
.picker{display: flex;justify-content: row;}
.scrollMenu{background-image: linear-gradient(-135deg, #57D1E2 0%, #37AED6 100%)}
.search .scrollInput{opacity: 1}
</style>
